<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title th:text="#{screen.success.header}">Generic Success View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="row" layout:fragment="content">
        <div class="w-100 m-auto mdc-card p-4">

            <h2 th:utext="#{screen.success.header}">Log In Successful</h2>
            <p th:utext="#{screen.success.success(${authentication.principal.id})}">You, <strong>username</strong>, have
                successfully logged into the Central Authentication Service. This is what CAS knows about you:However,
                you are seeing this page because CAS does not know about your target destination and how to get you
                there. Examine the authentication request again and make sure a target service/application that is
                authorized and registered with CAS is specified.</p>
            <p th:unless="${#maps.isEmpty(authentication.principal.attributes)}">

                The following attributes are resolved for <strong th:utext="${authentication.principal.id}"/>:

            <div class="w-100 mdc-data-table mx-auto my-4" id="divPrincipalAttributes">
                <table class="mdc-data-table__table" id="attributesTable" style="white-space: unset">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Type</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    <tr class="mdc-data-table__row" th:each="attribute : ${authentication.principal.attributes}">
                        <td class="mdc-data-table__cell"><code><span th:utext="${attribute.key}"/></code></td>
                        <td class="mdc-data-table__cell"><code><span th:utext="${attribute.value}"/></code></td>
                        <td class="mdc-data-table__cell"><code>Principal</code></td>
                    </tr>
                    <tr class="mdc-data-table__row" th:each="attribute : ${authentication.attributes}">
                        <td class="mdc-data-table__cell"><code><span th:utext="${attribute.key}"/></code></td>
                        <td class="mdc-data-table__cell"><code><span th:utext="${attribute.value}"/></code></td>
                        <td class="mdc-data-table__cell"><code>Authentication</code></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            </p>
            <p th:utext="#{screen.success.security}">
                When you are finished, for security reasons, please <a href="logout">log out</a> and exit your web
                browser.
            </p>
        </div>


        <script th:inline="javascript" type="text/javascript">
            let div = document.querySelector('#divPrincipalAttributes');
            new mdc.dataTable.MDCDataTable(div);
        </script>
    </div>
</main>
</body>
</html>
